<!--  -->
<template>
  <div class="state_container">
    <div class="head">
      <div class="title">动态</div>
      <div class="write_event">
        <el-button icon="el-icon-plus" type="danger" round>写动态</el-button>
      </div>
    </div>
    <div class="item_wrap">
      <div v-for="(item,index) in eventList" :key="index" class="item">
        <div @click="toUser(item.user.userId)" class="cover">
          <img :src="item.user.avatarUrl" alt="">
        </div>
        <div class="info_wrap">
          <div class="user_wrap">
            <div @click="toUser(item.user.userId)" class="user_name">{{item.user.nickname}}</div>
            <div class="user_event">{{item.type==18?'分享单曲':'发布动态'}}</div>
          </div>
          <div class="timer">{{item.eventTime | dateFormat}}</div>
          <div class="content">{{JSON.parse(item.json).msg}}</div>

          <div v-if="JSON.parse(item.json).song" @click="playMusic(JSON.parse(item.json).song.id)" class="music_info">
            <div class="music_cover">
              <img :src="JSON.parse(item.json).song.img80x80" alt="">
            </div>
            <div v-if="JSON.parse(item.json).song" class="music_wrap">
              <div class="music_name">
                {{JSON.parse(item.json).song.name }}
              </div>
              <div class="artist_name">{{JSON.parse(item.json).song.artists[0].name}}</div>
            </div>
          </div>
          <div v-if="item.pics.length>0" class="img_container">
            <div v-for="(item1,index1) in item.pics" :key="index1" class="event_img">

              <!-- <div><img v-show="item.pics.length==1" :style="{width:((item1.width)/3)+'px',height:item1.height/3+'px'}" :src="item1.originUrl" alt=""></div> -->
              <div>
                <el-image  v-show="item.pics.length==1" :style="{width:((item1.width)/3)+'px',height:item1.height/3+'px'}" :src="item1.originUrl" :preview="item1.squareUrl"></el-image>
              </div>
              <div>
                <el-image v-show="item.pics.length==2" :style="{width:200+'px',height:200+'px'}" :src="item1.squareUrl" :preview="item.pics.map(v=>v.squareUrl)"></el-image>
                <!-- <img v-show="item.pics.length==2" :style="{width:200+'px',height:200+'px'}" :src="item1.squareUrl" alt=""> -->
              </div>
              <div>
                <el-image v-show="item.pics.length==3" :style="{width:120+'px',height:120+'px'}" :src="item1.squareUrl" :preview="item.pics.map(v=>v.squareUrl)"></el-image>
                <!-- <img v-show="item.pics.length==3" :style="{width:120+'px',height:120+'px'}" :src="item1.squareUrl" alt=""> -->
              </div>
              <div >
                <el-image  v-show="item.pics.length>3" :style="{width:120+'px',height:120+'px'}" :src="item1.squareUrl"  :preview="item.pics"></el-image>
                <!-- <img v-show="item.pics.length>3" :style="{width:120+'px',height:120+'px'}" :src="item1.squareUrl" alt=""> -->
              </div>
            </div>
          </div>
          <div class="operation">
            <div class="button">
              <el-button v-if="!item.info.liked" @click="getEventLike(item.id,item.info.threadId,1,index)" icon="iconfont icondianzan" circle> {{item.info.likedCount}}</el-button>
              <el-button v-else @click="getEventLike(item.id,item.info.threadId,0,index)" icon="iconfont iconicon_goodfill active" circle> {{item.info.likedCount}}</el-button>
              <el-button icon="iconfont iconfenxiang" circle></el-button>
              <el-button icon="iconfont iconpinglun" circle></el-button>
            </div>
          </div>
        </div>
      </div>

      <div v-show="isShow" class="load">
        <el-button @click="loadmore" type="text">点击加载更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getEvent } from 'util/collect.js'
import { getEventLike } from 'util/songListPage'
import { mapGetters } from 'vuex'
export default {
  name: '',
  data() {
    return {
      lasttime: -1,
      eventList: [],
      isShow: true
    }
  },
  created() {
    this.getEvent()
  },
  watch: {
    songId(newValue, oldValue) {
      this.$store.dispatch('musicPlay/saveHasPlayList', newValue)
    }
  },
  computed: {
    ...mapGetters('musicPlay', [
      //当前播放歌曲id
      'songId',
      //是否在播放
      'isPlaying',
      'hasPlayList'
    ])
  },
  mounted() {},
  methods: {
    async getEvent() {
      let { data } = await getEvent(20, this.lasttime)
      this.lasttime = data.lasttime
        // console.log(data)
      this.eventList = data.event
      this.$previewRefresh();

      if (data.more == false) {
        this.isShow = false
      }
      //   console.log(JSON.parse(data.event[0].json).song.name)
    },
    async getEventLike(cid, threadId, type, index) {
      let { data } = await getEventLike(cid, threadId, type, 6)
      if (data.code == '200' && type === 1) {
        this.eventList[index].info.liked = true
        this.eventList[index].info.likedCount += 1
      } else {
        this.eventList[index].info.liked = false
        this.eventList[index].info.likedCount -= 1
      }
    },
    playMusic(id) {
      this.$store.dispatch('musicPlay/saveIsPlaying', true)
      //保存当前歌曲id
      this.$store.dispatch('musicPlay/saveSongId', id)
      sessionStorage.setItem('songId', id)
    },
    toUser(id) {
      this.$router.push('/userInfo/' + id)
    },
    //点击加载更多
    async loadmore() {
      let { data } = await getEvent(20, this.lasttime)
        // console.log(data)
      this.eventList = this.eventList.concat(data.event)
      //   console.log(this.eventList);
      this.lasttime = data.lasttime
      if (data.more == false) {
        this.isShow = false
      }
    }
  }
}
</script>

<style scoped lang='less'>
.state_container {
  padding: 20px 25px;
  .head {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .write_event {
      .el-button {
        font-size: 13px;
        height: 25px;
        padding: 4px 10px;
        background-color: #ec4141;
      }
      .el-button:hover {
        background-color: rgba(165, 17, 17, 0.856);
      }
    }
  }
  .item_wrap {
    .item {
      display: flex;
      border-bottom: 1px solid #ddd;
      padding: 16px 5px;
      .cover {
        flex: 1;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .info_wrap {
        cursor: pointer;
        flex: 25;
        margin-left: 10px;
        .user_wrap {
          font-size: 13px;
          display: flex;
          .user_name {
            color: #507daf;
            margin-right: 10px;
          }
          .user_event {
            color: #676767;
          }
        }
        .timer {
          line-height: 30px;
          color: #9f9f9f;
          font-size: 5px;
        }
        .content {
          color: #373737;
          line-height: 20px;
          margin-bottom: 10px;
        }
        .music_info {
          display: flex;
          padding: 8px;
          background-color: #efeff0;
          border-radius: 10px;
          margin-bottom: 15px;
          .music_cover {
            width: 40px;
            height: 40px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 8px;
            }
          }
          .music_wrap {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 10px;
            .music_name {
              color: #343434;
              font-size: 13px;
            }
            .artist_name {
              color: #979798;
              font-size: 8px;
            }
          }
        }
        .img_container {
          display: flex;
          flex-wrap: wrap;
          .event_img {
            margin-right: 5px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
        }
        .operation {
          float: right;
          .button {
            .el-button {
              font-size: 5px;
              border: none;
              padding: 0;
              margin-right: 10px;
            }
            .active {
              color: red;
            }
          }
        }
      }
    }
  }
}
.load {
  text-align: center;
}
</style>